<template>
    <div class="home">
        <!-- 将当前组件(页面)中的NavBar 传递到 .app-header -->
        <!--  @click-left="leftClick" -->
        <teleport :to='to'>
            <van-nav-bar 
                :class="$attrs.class"
                :title="title" 
                :fixed="fixed" 
                :safe-area-inset-top="safeAreaInsetTop" 
                :z-index="zIndex"
                :border="border" 
                :left-text="leftText" 
                :left-arrow="leftArrow" 
                :right-text="rightText"
                @click-left="leftClickHandler"
                @click-right="rightClick">

                <!-- 如何AppHeader的父组件给AppHeader传递插槽内容 AppHeader会将对应的内容传递给 NavBar  -->
                <!-- 如何AppHeader的父组件没有给AppHeader传递插槽内容 AppHeader将不会传递内容给 NavBar  -->
                <!-- 如何知道AppHeader的各个命名插槽中 是否接收内容 ??  this.$slots  => 当前组件对应插槽名称接收的内容  -->

                <template v-if="$slots.left" #left>
                    <slot name="left"></slot> <!-- AppHeader name=left插槽中的内容接收 => 传入给NavBar -->
                </template>
                <template v-if="$slots.title" #title>
                    <slot name="title"></slot>
                </template>
                <template v-if="$slots.right" #right>
                    <slot name="right"></slot>
                </template>
            </van-nav-bar>
        </teleport>
    </div>
</template>

<script>
// 选项式=>好写
// 在teleport van-nav-bar 的基础上对组件进行二次封装  => AppHeader
// AppHeader  -> 想要有tp功能 -> 接收一个to参数给 teleport
// AppHeader  -> 想要navBar (title left-text left-arrow  right-text  @click-left  @click-right   => 全都要)

import { NavBar } from "vant";


export default {
    inheritAttrs:false,
    name: "AppHeader",
    props: {
        ...NavBar.props, // AppHeader 需要接收的数据 和 NavBar保持一直 ((title left-text left-arrow  right-text  )
        to: { // teleport 需要的参数
            type: String,
        },
        // @click-left  @click-right  事件  => AppHeader需要接收对应执行函数  -> 绑定给两个事件
        leftClick: {
            type: Function
        },
        rightClick: {
            type: Function
        },
        back:{   // 是否点击左边回退
            type:Boolean,
            default:false,
        }
    },
    methods: {
        leftClickHandler(e){
            if(this.back == true){
                this.$router.back();
            }
            if(this.leftClick){
                this.leftClick(e);
            }
        }
    },
    mounted() {
        console.log("this", this);
    },

}



</script>

<style scoped>
.box {
    width: 100px;
    height: 100px;
    background-color: #6ff;
}
</style>